<template>
	<view class="xbox">
		<view style="padding:20upx;margin-top:30upx;">
			<search />
		</view> 
		<view class="page-body" style="margin:0upx -20upx;flex:1;">
			<view class="nav-left" >
				<view class="nav-left-item" @click="navChange(i)"  v-for="(item,i) in navArr" :key='i' :class="gender==item.id?'active': ''"
					>
					{{item.name}}
				</view>
			</view>
			<view class="nav-right" >
				<view  class="box">
					<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in categorys[gender]" :key="i" @click="handleLi(item)">
						<image :src="item.icon" />
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import search from '@/components/public/booksearch.vue' ; 
export default{
	components: { 
		search
	},
	data(){
		return{
			gender: 1,
			navArr:[
				{
					name:'男生' ,
					id:1,
				},
				{
					name:'女生' ,
					id:2,
				},
			],
			categorys:{},
		}
	},
	computed: {
		height(){
			return uni.getSystemInfoSync().windowHeight - this.tabBarHeight  ;
		}
	},
	onLoad(props){
		if(props.gender) this.gender = props.gender * 1 ;
		this.fetch();
	},
	methods: {
		fetch(){
			this.fetchCategorys();
		},
		fetchCategorys(){
			if(this.categorys[this.gender]) return ; 
			
			let post = {};
			post.gender = this.gender;
			this.$iapi.vapi('category/s', post, {
				succ: js => {
					if(!js || !js.list || js.list.length < 1) return ; 
					
					this.categorys[this.gender] = [] ;
					js.list.map(it=>{
						let dd = {} ;
						dd.id = it.id ; 
						dd.icon = it.icon ; 
						dd.name = it.name ;
						this.categorys[this.gender].push(dd);
					}); 
					
					this.$forceUpdate();
				},
				ever: js => {
				},
			});
		},
		
		navChange(index){
			if(!this.navArr[index]) return ; 
			
			if(this.gender!=this.navArr[index].id){
				this.gender = this.navArr[index].id;
				this.fetchCategorys() ;
			}
		},
		
		//点击项目
		handleLi(item){
			this.$go.burl('book/list?gender='+this.gender+'&category_id='+item.id);
		}
	}
}
</script>

<style>
	page{
		padding:0px;
		overflow-x:hidden;
	}
	.xbox{
		height:100vh;display: flex;flex-direction: column;
	}
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}
	.margin-top-20{
		margin-top:20upx;
	}
	.margin-top-40{
		margin-top:40upx;
	}
	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav-left-item:last-child{
		border-bottom: none;
	}
	.nav-right {
		width: 75%;
	}
	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}
	.box:last-child {
		border: none;
	}
	.nav-right-item {
		width: 28%;
		height: 250upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;
	}

	.nav-right-item image {
		width: 150upx;
		height: 200upx;
	}

	.active {
		color: #FF80AB;
		background: #fff;
		border-right: 0;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}
</style>

